<template>
    <Overlay ref="OverlayRef" />
    <view class="head_search">
        <view class="input_box">
            <input :value="searchVal" @input="searchInput" placeholder-class="my-input-placeholder" class="input"
                placeholder="找公文，搜通知" type="text">
            <text class="s_icon iconfont icon-sousuo"></text>
            <text @tap="close" v-show="searchVal.length > 0" class="close_icon iconfont icon-guanbishixin"></text>
        </view>
        <view class="add" @tap="openOverlay">+</view>
        <view class="layOut icon-shezhi iconfont" @tap="layout"></view>
    </view>
</template>
<script setup>
import { ref } from 'vue'
import Overlay from './Overlay.vue'
const emit = defineEmits(['inputChange'])
import {  removeToken } from '@/utils/auth'
import modal from '@/plugins/modal'
const OverlayRef = ref()
const searchVal = ref('')

let timerId = null
function searchInput(e) {
    clearTimeout(timerId)
    timerId = setTimeout(() => {
        const { value } = e.detail
        searchVal.value = value
        emit('inputChange', value)
    }, 500)
}
function openOverlay() {
    OverlayRef.value.open()
}
async function layout() {
    const res = await modal.confirm('确定要退出吗?')
    if (res) {
        uni.clearStorageSync()
        removeToken()
        uni.reLaunch({ url: '/pages/login' })
    }

}
function close() {
    searchVal.value = ''
    emit('inputChange', '')
}
</script>
  
<style lang="scss">
.head_search {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    width: 90%;
    height: 72rpx;
    margin: 0 auto;

    .input_box {
        position: relative;
        display: flex;
        align-items: center;
        width: 560rpx;
        height: 72rpx;
        border-radius: 36rpx;
        font-size: 30rpx;
        background-color: rgba(255, 255, 255, 0.3);

        .my-input-placeholder {
            color: #fff;
        }

        .input {
            padding-left: 80rpx;
            width: 85%;
            height: 100%;
            font-size: 30rpx;
            color: #fff;
        }


        .close_icon {
            position: absolute;
            top: 49%;
            right: 20rpx;
            transform: translateY(-50%);
            color: #fff;
            font-size: 48rpx;
        }

        .s_icon {
            position: absolute;
            top: 49%;
            transform: translateY(-50%);
            color: #fff;
            font-size: 38rpx;
            margin: 0 10rpx 0 30rpx;
        }


    }

    .add {
        width: 72rpx;
        height: 72rpx;
        color: #fff;
        font-size: 70rpx;
        line-height: 70rpx;
        text-align: center;
        align-items: center;
    }

    .layOut {
        font-size: 50rpx;
        margin-top: 12rpx;
        margin-left: 10px;
        color: #fff;
    }
}
</style>
  